<template>
  <div>
    <div>
      <table>
        <tr>
          <td>类似表单：</td>
          <td :style="{ width: '200px' }">
            <el-select v-model="similarFormCustom" @change="similarFormCustomChange">
              <!-- <el-option
					      v-for="item in similarFormCustomOptions"
					      :key="item.formCustomId"
					      :label="item.formCustomName"
					      :value="item.formCustomId"
					    /> -->
            </el-select>
          </td>

          <td v-if="formCustomData.formCustomId != undefined && formCustomData.formCustomId != ''">表单名称：</td>
          <td v-if="formCustomData.formCustomId != undefined && formCustomData.formCustomId != ''">
            <el-input v-model="formCustomData.formCustomName" />
          </td>
          <td>配置项分类：</td>
          <td><el-input v-model="customerTypeName" id="customerTypeNameInput" /></td>
          <td><el-checkbox v-model="isShowBorder" size="large">显示边框</el-checkbox></td>
          <!-- <td><el-checkbox  v-model="isDefault" size="large">设置为默认表单</el-checkbox></td> -->
          <td>
            <p>显示模式：</p>
          </td>
          <td :style="{ width: '200px' }">
            <el-select v-model="hearderData.layoutType">
              <el-option label="一列" value="oneRow" />
              <el-option label="二列" value="twoRow" />
            </el-select>
          </td>
          <td>
            <el-button type="primary" link @click="previewCustomer">预览</el-button>
          </td>
          <td>
            <el-button type="primary" link @click="saveCustomer">保存</el-button>
          </td>
          <!-- <td>
					<el-button type="primary" link @click="saveTest">预览保存数据</el-button>
				</td> -->
        </tr>
      </table>

      <el-dialog title="预览" v-model="previewCustomerTableVisible">
        <div :style="{ height: '500px' }" class="custom-tree">
          <form-create v-model="formData" :option="option" :rule="formCreateRules" />
          <el-form style="width: 100%" label-width="122px">
            <el-form-item label="描述 :">
              <WangEditor v-if="edescFlag == true" v-model:value="content" width="100px" height="100px" />
            </el-form-item>
          </el-form>
          <form-create v-model="formData" :option="option2" :rule="formCreateRules2" class="custom-tree" />
        </div>
      </el-dialog>
      <el-dialog title="选项卡设置" v-model="tabSettingsDialogVisible">
        <div :style="{ height: '300px' }" class="custom-tree">
          <el-form style="width: 100%" label-width="122px">
            <el-form-item label="选项卡名称 :">
              <input type="text" v-model="tabDataForm.tabName" />
            </el-form-item>
            <el-form-item label="自定义字段 :">
              <el-button type="primary" @click="tabFieldsSelectbtn">选择</el-button>
              <span v-for="(item, index) in tabFieldsSelectList" :key="index">
                <span>{{ item.title }}</span>
                <el-button :icon="Delete" link @click="deletetabFieldsSelectListObj(item, index)"></el-button>
              </span>
            </el-form-item>
            <el-button type="primary" @click="saveTabSettingsBtn">保存</el-button>
          </el-form>
        </div>
      </el-dialog>
      <el-dialog title="选择自定义字段" v-model="tabFieldsSelectDialogVisible" :style="{ height: '800px' }">
        <!-- <el-button type="primary" @click="tabFieldsSelectQueDingbtn">确定</el-button> -->
        <div :style="{ height: '500px' }">
          <ProTable
            ref="proTable"
            row-key="attrNo"
            :indent="20"
            :columns="columns2"
            :request-api="getTabFieldsSelectList"
            :request-auto="false"
            :data-callback="dataCallback"
            :search-col="{ xs: 1, sm: 1, md: 2, lg: 3, xl: 3 }"
          >
            <!-- 表格 header 按钮 -->
            <template #tableHeader="scope">
              <el-button type="primary" @click="tabFieldsSelectQueDingbtn(scope.selectedList)">确定</el-button>
            </template>
          </ProTable>
        </div>
      </el-dialog>
      <el-dialog title="选择客户" v-model="dialogCompanyNoTableVisible">
        <div :style="{ height: '500px' }">
          <Custemerselect @send-data="sendCompanyNoData" />
        </div>
      </el-dialog>
      <el-dialog title="选择位置" v-model="dialogLocationTableVisible">
        <div :style="{ height: '500px' }">
          <el-tree
            :data="LocationSelectList"
            :props="defaultProps"
            :default-expand-all="true"
            @node-click="handleNodeClickLocation"
            class="custom-tree"
          />
          <el-button class="dialogOkBtn" type="primary" @click="submitLocation" style="min-width: 80px"> 确 定 </el-button>
        </div>
      </el-dialog>
      <el-dialog title="选择部门" v-model="dialogDepartmentVisible">
        <div :style="{ height: '500px' }">
          <el-tree
            :data="departmentSelectList"
            :props="defaultProps"
            :default-expand-all="true"
            @node-click="handleNodeClickDepartment"
            class="custom-tree"
          />
          <el-button class="dialogOkBtn" type="primary" @click="submitDepartment" style="min-width: 80px"> 确 定 </el-button>
        </div>
      </el-dialog>
      <el-dialog title="选择负责人" v-model="dialogOwnerVisible">
        <div :style="{ height: '500px' }">
          <Userselect @send-data="sendOwner" :father="fatherValue" />
        </div>
      </el-dialog>
      <el-dialog title="选择使用人" v-model="dialogUserNameVisible">
        <div :style="{ height: '500px' }">
          <Userselect @send-data="sendUserNamer" :father="fatherValue" />
        </div>
      </el-dialog>
    </div>
    <div class="card content-box">
      <el-row>
        <el-col :span="18" :style="{ width: '1000px' }" v-if="hearderData.layoutType == 'oneRow'">
          <draggable
            :list="defaultFormCreateRules"
            ghost-class="ghost"
            :force-fallback="true"
            chosen-class="chosenClass"
            animation="300"
            @start="onDragStart"
            @end="onDragEnd"
            :sort="true"
            handle=".drag"
            item-key="id"
            group="group1"
          >
            <template #item="{ element, index }">
              <div :class="element.state == 1 ? 'item1 item' : 'item1 item'">
                <div class="drag">
                  <i>{{ element.title }}:</i>
                  <i><el-input :style="{ width: '200px' }" /></i>
                  <i><el-button :icon="Delete" link @click="deleteObj(element, index)"></el-button></i>
                </div>
              </div>
            </template>
          </draggable>
        </el-col>
        <el-col :span="18" :style="{ width: '1000px' }" v-if="hearderData.layoutType == 'twoRow'">
          <draggable
            :list="defaultFormCreateRules"
            ghost-class="ghost"
            :force-fallback="true"
            chosen-class="chosenClass"
            animation="300"
            @start="onDragStart"
            @end="onDragEnd"
            :sort="true"
            handle=".drag"
            item-key="id"
            group="group1"
          >
            <template #item="{ element, index }">
              <div :class="element.state == 1 ? 'item1 item' : 'item'">
                <div class="drag">
                  <i>{{ element.title }}:</i>
                  <i><el-input :style="{ width: '200px' }" /></i>
                  <i><el-button :icon="Delete" link @click="deleteObj(element, index)"></el-button></i>

                  <!-- <el-row :style="{'width':'400px'}" >
										<el-col :span="10">
											<lable :style="{'width':'100px'}">{{element.title}}:</lable>
										</el-col>
										<el-col :span="6">
											<el-input  :style="{'width':'200px'}"  />
										</el-col>
										<el-col :span="4">
											<lable :style="{'width':'100px'}">asdfdsa{{ index + 1 }}</lable>
										</el-col>
										
									</el-row> -->
                </div>
              </div>
            </template>
          </draggable>
        </el-col>
        <el-col :span="3" :style="{ width: '400px' }">
          <el-collapse v-model="activeNames">
            <el-collapse-item title="基础字段" name="1">
              <draggable
                :list="baseFormCreateRules"
                ghost-class="ghost"
                :force-fallback="true"
                chosen-class="chosenClass"
                animation="300"
                @start="onDragStart"
                @end="onDragEnd"
                :sort="true"
                handle=".drag"
                item-key="id"
                group="group1"
              >
                <template #item="{ element }">
                  <div>
                    <!-- <i><el-checkbox
						                 @change="checkoutChange(element, index)"
						                 v-model="element.state"
						                 size="large"
						                 :label="element.name"
						                 :true-label="1"
						                 :false-label="0"
						               />
						             </i>
						             <i>{{ index + 1 }}</i>
						             <i class="drag">拖动</i> -->
                    <div class="drag">
                      <el-row :style="{ width: '100%' }">
                        <el-col :span="12">
                          <label>{{ element.title }}:</label>
                        </el-col>
                        <el-col :span="6">
                          <el-input :style="{ width: '100px' }" />
                        </el-col>
                        <!-- <el-col :span="6">
									 			<i>{{ index + 1 }}</i>
									 		</el-col> -->
                      </el-row>
                    </div>
                  </div>
                </template>
              </draggable>
            </el-collapse-item>
            <el-collapse-item title="自定义字段" name="2">
              <draggable
                :list="customerFormCreateRules"
                ghost-class="ghost"
                :force-fallback="true"
                chosen-class="chosenClass"
                animation="300"
                @start="onDragStart"
                @end="onDragEnd"
                :sort="true"
                handle=".drag"
                item-key="id"
                group="group1"
              >
                <template #item="{ element }">
                  <div>
                    <!-- <i><el-checkbox
						                  @change="checkoutChange(element, index)"
						                  v-model="element.state"
						                  size="large"
						                  :label="element.name"
						                  :true-label="1"
						                  :false-label="0"
						                />
						              </i>
						              <i>{{ index + 1 }}</i>
						              <i class="drag">拖动</i> -->
                    <div class="drag">
                      <el-row :style="{ width: '100%' }">
                        <el-col :span="12">
                          <label>{{ element.title }}:</label>
                        </el-col>
                        <el-col :span="6">
                          <el-input :style="{ width: '100px' }" />
                        </el-col>
                        <!-- <el-col :span="6">
									  			<i>{{ index + 1 }}</i>
									  		</el-col> -->
                      </el-row>
                    </div>
                  </div>
                </template>
              </draggable>
            </el-collapse-item>
            <el-collapse-item title="选项卡" name="3">
              <div>
                <el-button type="primary" @click="addtabFiletab">+</el-button>
              </div>
              <draggable
                :list="tabList"
                ghost-class="ghost"
                :force-fallback="true"
                chosen-class="chosenClass"
                animation="300"
                @start="onDragStart"
                @end="onDragEnd"
                :sort="true"
                handle=".drag"
                item-key="id"
                group="group5"
              >
                <template #item="{ element, index }">
                  <div>
                    <div class="drag">
                      <el-row :style="{ width: '100%' }">
                        <el-col :span="12">
                          <label @click="clickTab(element, index)">{{ element.tabName }}</label>
                        </el-col>
                        <el-col :span="6">
                          <el-button :icon="Delete" link @click="deletetabListObj(element, index)"></el-button>
                        </el-col>
                      </el-row>
                    </div>
                  </div>
                </template>
              </draggable>
            </el-collapse-item>
          </el-collapse>
          <!-- <draggable
			   				  :list="state.modules.public"
			   				  ghost-class="ghost"
			   				  handle=".move"
			   				  filter=".forbid"
			   				  :force-fallback="true"
			   				  chosen-class="chosenClass"
			   				  animation="300"
			   				  @start="onStart"
			   				  @end="onEnd"
			   				  group="group1"
			   				  :fallback-class="true"
			   				  :fallback-on-body="true"
			   				  :touch-start-threshold="50"
			   				  :fallback-tolerance="50"
			   				  :move="onMove"
			   				>
			   				 <template #item="{ element }" >
			   				   <div :class="element.disabledMove ? 'forbid itemold' : 'itemold'"  >
			   				 	 <label class="move">{{ element.viewName!=undefined?element.viewName:element.reportName!=undefined?element.reportName:element.filterName }}</label>
			   				 	 <p >{{ element.viewType=="staticView"?"静态视图":element.viewType=="singleView"?"报表视图":element.viewType=="filterView"?"过滤视图":element.filterName!=""?"过滤视图":element.reportName!=""?"报表视图":"" }}</p>
			   				   </div>
			   				 </template>
			   				</draggable> -->
        </el-col>
        <el-col :span="3" :style="{ width: '400px' }">
          <!-- <draggable
							  :list="state.modules.public2"
							  ghost-class="ghost"
							  handle=".move"
							  filter=".forbid"
							  :force-fallback="true"
							  chosen-class="chosenClass"
							  animation="300"
							  @start="onStart"
							  @end="onEnd"
							  group="group1"
							  :fallback-class="true"
							  :fallback-on-body="true"
							  :touch-start-threshold="50"
							  :fallback-tolerance="50"
							  :move="onMove"
							>
							 <template #item="{ element }" >
							   <div :class="element.disabledMove ? 'forbid itemold' : 'itemold'"  >
							 	 <label class="move">{{ element.viewName!=undefined?element.viewName:element.reportName!=undefined?element.reportName:element.filterName }}</label>
							 	 <p >{{ element.viewType=="staticView"?"静态视图":element.viewType=="singleView"?"报表视图":element.viewType=="filterView"?"过滤视图":element.filterName!=""?"过滤视图":element.reportName!=""?"报表视图":"" }}</p>
							   </div>
							 </template>
							</draggable> -->
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface";
//导入draggable组件
import draggable from "vuedraggable";
import {
  findallViewAndUserViewTwo,
  findAllSystemView,
  findCustomFilter,
  updateRowsWidth,
  updateUserCustomView,
  findBaseReport,
  sgreportFindPager,
  mutilreportFindPager,
  kpireportFindPager,
  crossreportFindPager,
  findattrs,
  saveFormCustomTabs,
  updateFormCustomTabs
} from "@/api/modules/systemTools";
import { getCurrentLoginUser } from "@/api/modules/accessController";
import { ElMessage, ElMessageBox, FormRules, FormInstance } from "element-plus";
import { useRoute, useRouter } from "vue-router";
import { useTabsStore } from "@/stores/modules/tabs";
import Custemerselect from "@/views/tools/custemerSelect/index.vue";
import { Base64 } from "js-base64";
import {
  findPageScheduledTask,
  saveScheduledTask,
  deleteScheduledTask,
  findScheduledTaskById,
  editScheduledTask,
  findPagerContentTemplate,
  editTemplateName,
  deleteContentTemplate,
  findPagerFormCustom,
  deleteFormCustom,
  findEavEntity,
  isFormCustomNameExisted,
  findFormCustomById,
  findAttributesByEavNo,
  saveFormCustom,
  findSimilarFormCustom
} from "@/api/modules/systemTools";
import { dataDictionaryItemsfindByCode, getCategoryTreeAllData } from "@/api/modules/dataDictionary";
import { CirclePlus, Delete, EditPen, Download, Upload, View, Refresh, Avatar } from "@element-plus/icons-vue";
import WangEditor from "@/components/WangEditor/index.vue";
import formCreate from "@form-create/element-ui"; // 引入 FormCreate
import { getUserDepartment } from "@/api/modules/jggl";
import Userselect from "@/views/tools/userselect/index.vue";
import { findAttrs } from "@/api/modules/dailyWork";
const formData = ref({});
const router = useRouter();
const route = useRoute();
const tabStore = useTabsStore();
// 父组件的值
const fatherValue = ref({ orgNo: 1 });
//客户选择子组件弹窗回调方法
const sendCompanyNoData = (data: any) => {
  formData.value["companyName"] = data.orgName;
  formData.value["companyNo"] = data.orgNo;

  //失去焦点避免重复打开 对话框
  let inputBox = document.getElementById("customerTypeNameInput") as HTMLInputElement; // 获取输入框元素
  inputBox.focus();
  dialogCompanyNoTableVisible.value = false;
};
//负责人选择子组件弹窗回调方法
const sendOwner = (data: any) => {
  formData.value["ownerId"] = data.userId;
  formData.value["owner"] = data.fullName;
  //失去焦点避免重复打开 对话框
  let inputBox = document.getElementById("customerTypeNameInput") as HTMLInputElement; // 获取输入框元素
  inputBox.focus();
  //(cwangEditor.value as any).editor.focus()
  dialogOwnerVisible.value = false;
};
//使用人选择子组件弹窗回调方法
const sendUserNamer = (data: any) => {
  formData.value["userNameId"] = data.userId;
  formData.value["userName"] = data.fullName;
  //失去焦点避免重复打开 对话框
  let inputBox = document.getElementById("customerTypeNameInput") as HTMLInputElement; // 获取输入框元素
  inputBox.focus();
  //(cwangEditor.value as any).editor.focus()
  dialogUserNameVisible.value = false;
};
const LocationSelectValue = ref();
const LocationSelectList = ref<any>([]);
const locationCustomerSelectValue = ref();
const locationCustomerSelectList = ref<any>([]);

const departmentSelectValue = ref();
const departmentSelectList = ref<any>([]);
const departmentCustomerSelectValue = ref();
const departmentCustomerSelectList = ref<any>([]);

const handleNodeClickLocation = (data: any) => {
  console.log(data);
  locationCustomerSelectValue.value = data;
};
const handleNodeClickDepartment = (data: any) => {
  console.log(data);
  departmentCustomerSelectValue.value = data;
};

const submitLocation = () => {
  console.log("sdfaadfds");
  if (locationCustomerSelectValue.value == null || locationCustomerSelectValue.value == undefined) {
    ElMessage.info("请选择位置");
    return;
  }
  console.log("777777777");
  if ((locationCustomerSelectValue.value.children as any).length > 0) {
    ElMessage.info("请选择叶子节点");
    return;
  }
  console.log("8888888888");
  console.log(locationCustomerSelectValue.value);
  formData.value["loc"] = locationCustomerSelectValue.value.attr.cname;
  formData.value["locId"] = locationCustomerSelectValue.value.attr.id;
  //console.log(formData.value)
  //失去焦点避免重复打开 对话框
  let inputBox = document.getElementById("customerTypeNameInput") as HTMLInputElement; // 获取输入框元素
  inputBox.focus();
  // if(cwangEditor.value!=null){
  // 	(cwangEditor.value["editor"] as any).focus()
  // }
  dialogLocationTableVisible.value = false;
};
const submitDepartment = () => {
  console.log("sdfaadfds");
  if (departmentCustomerSelectValue.value == null || departmentCustomerSelectValue.value == undefined) {
    ElMessage.info("请选择位置");
    return;
  }
  console.log("777777777");
  if ((departmentCustomerSelectValue.value.children as any).length > 0) {
    ElMessage.info("请选择叶子节点");
    return;
  }
  console.log("8888888888");
  console.log(departmentCustomerSelectValue.value);
  formData.value["department"] = departmentCustomerSelectValue.value.attr.orgName;
  formData.value["departmentName"] = departmentCustomerSelectValue.value.attr.orgName;
  //console.log(formData.value)
  //失去焦点避免重复打开 对话框
  let inputBox = document.getElementById("customerTypeNameInput") as HTMLInputElement; // 获取输入框元素
  inputBox.focus();
  // if(cwangEditor.value!=null){
  // 	(cwangEditor.value["editor"] as any).focus()
  // }
  dialogDepartmentVisible.value = false;
};
const defaultProps = {
  children: "children",
  label: "data"
};
onMounted(() => {
  //loadData();
  //编辑时加载数据
  let query = JSON.parse(JSON.stringify(route.query));
  let newParams = JSON.parse(query.data);
  formCustomData.eavNo = newParams.eav;
  formCustomData.formCustomName = newParams.name;

  formCustomData.ciCategoryNo = newParams.ciCategoryNo;
  //formCustomData.type=newParams.type
  customerTypeName.value = newParams.ciCategoryName;

  findAttributesByEavNo(newParams.eav).then(res => {
    (res as any).forEach(function (element) {
      if (element.attrType == "String") {
        customerFormCreateRules.value.push({
          attrNo: element.attrNo,
          type: "input",
          field: element.attrName,
          title: element.attrAsName,
          value: "",
          customerType: "customer",
          col: {
            span: 10
          }
        });
      }
      if (element.attrType == "Radio") {
        customerFormCreateRules.value.push({
          attrNo: element.attrNo,
          type: "radio",
          field: element.attrName,
          title: element.attrAsName,
          value: "",
          customerType: "customer",
          col: {
            span: 10
          },
          options: [{ value: true, label: element.attrAsName, disabled: false }]
        });
      }
      if (element.attrType == "checkbox") {
        customerFormCreateRules.value.push({
          attrNo: element.attrNo,
          type: "checkbox",
          field: element.attrName,
          title: element.attrAsName,
          value: "",
          customerType: "customer",
          col: {
            span: 10
          },
          options: [{ value: true, label: element.attrAsName, disabled: false }]
        });
      }
      if (element.attrType == "Double") {
        customerFormCreateRules.value.push({
          attrNo: element.attrNo,
          type: "InputNumber",
          field: element.attrName,
          title: element.attrAsName,
          value: "",
          customerType: "customer",
          col: {
            span: 10
          },
          props: {
            precision: 3
          }
        });
      }
      if (element.attrType == "Integer") {
        customerFormCreateRules.value.push({
          attrNo: element.attrNo,
          type: "InputNumber",
          field: element.attrName,
          title: element.attrAsName,
          value: "",
          customerType: "customer",
          col: {
            span: 10
          },
          props: {
            precision: 0
          }
        });
      }
      if (element.attrType == "Date") {
        customerFormCreateRules.value.push({
          attrNo: element.attrNo,
          type: "DatePicker",
          field: element.attrName,
          title: element.attrAsName,
          value: "",
          customerType: "customer",
          col: {
            span: 10
          },
          props: {
            type: "datetime",
            format: "YYYY-MM-dd HH:mm:ss",
            placeholder: "请选择日期"
          }
        });
      }
      if (element.attrType == "Lob") {
        customerFormCreateRules.value.push({
          attrNo: element.attrNo,
          type: "input",
          field: element.attrName,
          title: element.attrAsName,
          value: "",
          customerType: "customer",
          col: {
            span: 10
          },
          props: {
            type: "textarea "
          }
        });
      }
      if (element.attrType == "DataDictionaray") {
        let optionList = [];
        //优先级priority
        dataDictionaryItemsfindByCode(element.attrdataDictionary).then(res => {
          (res as any).forEach(function (element) {
            element["lable"] = element["dname"];
            element["value"] = element["dname"];
          });
          optionList = res as any;
          // 	  customerFormCreateRules.value.push(
          // 	  	{
          // 	  	  type: "select",
          // 	  	  field: element.attrName,
          // 	  	  title: element.attrAsName,
          // 	  	  value: "",
          // 	  	    options: optionList,
          // 	attrdataDictionary:element.attrdataDictionary,
          // 	customerType:"customer",
          // 	  	}

          // 	  )
          // let dataDictionaryFlagListObj={
          // 	id:element.attrName,
          // 	attrdataDictionary:element.attrdataDictionary,
          // 	dataList:optionList
          // }
          // dataDictionaryFlagList.value.push(dataDictionaryFlagListObj)
        });
        customerFormCreateRules.value.push({
          attrNo: element.attrNo,
          type: "select",
          field: element.attrName,
          title: element.attrAsName,
          value: "",
          options: optionList,
          attrdataDictionary: element.attrdataDictionary,
          customerType: "customer"
        });
      }
    });

    resAllDataCustomerFormCreateRules.value = customerFormCreateRules.value;

    // 假设从后端获取的 JSON 字符串存储在变量 jsonStr 中

    // defaultFormCreateRules.value=[
    //   {
    //     type: "input",
    //     field: "companyName",
    //     title: "所属客户",
    //     value: "",
    //     col: {
    //       span: 10
    //     },
    //     on: {
    //       focus(inject) {
    //         dialogCompanyNoTableVisible.value = true;
    //       }
    //     },
    //     validate: [{ required: true, message: "请选择客户", trigger: "change" }]
    //   },
    //   {
    //     type: "input",
    //     field: "cino",
    //     title: "固定资产编号",
    //     value: "",
    //     name: "cino",
    //     col: {
    //       span: 10
    //     },
    //     validate: [{ required: true, message: "请填写编号", trigger: "change" }]
    //   },
    //   {
    //     type: "input",
    //     field: "ciname",
    //     title: "固定资产名称",
    //     value: "",
    //     name: "ciname",
    //     col: {
    //       span: 10
    //     },
    //     validate: [{ required: true, message: "请填写名称", trigger: "change" }]
    //   },
    //   {
    //     type: "select",
    //     field: "statusId",
    //     title: "状态",
    //     value: "",
    //     attrdataDictionary: "useStatus",
    //     col: {
    //       span: 10
    //     },
    //     options: []
    //   },
    //   {
    //     type: "input",
    //     field: "loc",
    //     title: "位置",
    //     value: "",
    //     col: {
    //       span: 10
    //     },
    //     on: {
    //       focus(inject) {
    //         dialogLocationTableVisible.value = true;
    //       }
    //     }
    //   },
    //   {
    //     type: "DatePicker",
    //     field: "buyDate",
    //     title: "采购日期",
    //     value: "",
    //     col: {
    //       span: 10
    //     },
    //     props: {
    //       type: "datetime",
    //       // format: "yyyy-MM-dd HH:mm:ss",
    //       placeholder: "请选择采购日期"
    //       //valueFormat:"YYYY-MM-dd HH:mm:ss",
    //     }
    //   }]

    // const jsonStr = '{"IP资源":["网段","序号","资产分类","编号前缀","配置项类型","资产状态中文名","显示名称(GDH)","乐观锁","用途","更新时间","备注","创建时间","配置项ID","资源类型","再启用时间","附件列表","资产分类中文名","资产编号","使用部门","资产状态"],"数据库授权":["访问状态","序号","资产分类","编号前缀","配置项类型","资产状态中文名","显示名称(GDH)","信息中心主管","更新时间","运维经理","创建时间","配置项ID","制造商","附件列表","自动创建对象","资产分类中文名","数据库版本","品牌型号","网络运维","资产编号","使用部门","业务部门主管","现场运维","乐观锁","关联标识","基础设施运维","业务管理","信息安全管理","再启用时间","序列号","资产名称","负责人","使用人","负责人电话","资产状态"],"FC SAN交换机":["序号","资产分类","编号前缀","配置项类型","资产状态中文名","显示名称(GDH)","信息中心主管","更新时间","运维经理","创建时间","配置项ID","制造商","附件列表","资产分类中文名","网络运维","资产编号","使用部门","供应链负责人","乐观锁","信息安全管理","再启用时间","资产名称","位置","资产状态"],"负载均衡器":["厂商维保电话","资产型号","更新时间","设备电源数","设备名称","所属网络区域","配置项ID","品牌型号","标签","网络运维","业务部门主管","关联标识","业务管理","基础设施运维","运维负责人","信息安全管理","再启用时间","购买日期","资产名称","资产状态","序号","资产分类","采购日期","编号前缀","配置项类型","资产状态中文名","显示名称(GDH)","信息中心主管","运维经理","备注","技术管理","系统版本","创建时间","制造商","附件列表","应用系统运维","自动创建对象","资产分类中文名","应用软件开发负责人","中文别名","资产编号","使用部门","供应链负责人","质保到期日","登记日期","现场运维","乐观锁","技术分管","维保年限","序列号","资产物理位置"],"软件授权":["序号","资产分类","编号前缀","配置项类型","资产状态中文名","显示名称(GDH)","信息中心主管","更新时间","运维经理","创建时间","配置项ID","制造商","附件列表","自动创建对象","资产分类中文名","品牌型号","网络运维","资产编号","使用部门","业务部门主管","现场运维","乐观锁","关联标识","基础设施运维","业务管理","信息安全管理","再启用时间","序列号","资产名称","使用人","资产状态"],"Windows":["序号","资产分类","内存总容量(G)","所属资源池","编号前缀","资产状态中文名","配置项类型","显示名称(GDH)","信息中心主管","更新时间","运维经理","创建时间","配置项ID","系统SN/授权类型","网络区域(GDH)","附件列表","资产分类中文名","运维人员联系方式","网络运维","访问状态","虚拟机ID/机架位置","资产编号","操作系统版本","IP","部署位置(GDH)","资源类型","CPU核数","乐观锁","硬盘总容量(G)","基础设施运维","业务管理","环境","运维负责人","再启用时间","信息安全管理","资产名称","信息中心负责人","资产状态"],"磁盘阵列":["序号","资产分类","编号前缀","配置项类型","资产状态中文名","显示名称(GDH)","信息中心主管","更新时间","运维经理","供应链维保电话","创建时间","配置项ID","制造商","网络区域(GDH)","生产日期","附件列表","自动创建对象","资产分类中文名","品牌型号","网络运维","资产编号","质保到期日","部署位置(GDH)","乐观锁","关联标识","运维负责人","信息安全管理","序列号","资产名称","WWN","资产状态"],"域名资产":["序号","资产分类","编号前缀","配置项类型","资产状态中文名","显示名称(GDH)","乐观锁","关联标识","更新时间","创建时间","配置项ID","再启用时间","附件列表","资产分类中文名","资产名称","资产编号","资产状态"],"三级域名":["序号","资产分类","编号前缀","配置项类型","资产状态中文名","显示名称(GDH)","乐观锁","关联标识","更新时间","创建时间","配置项ID","再启用时间","附件列表","资产分类中文名","资产名称","资产编号","资产状态"],"VPN":["资产型号","更新时间","设备电源数","配置项ID","网络运维","标签","业务部门主管","关联标识","业务管理","基础设施运维","运维负责人","信息安全管理","再启用时间","购买日期","资产名称","所属网络区域","资产状态","序号","资产分类","编号前缀","配置项类型","资产状态中文名","显示名称(GDH)","信息中心主管","运维经理","备注","技术管理","系统版本","创建时间","制造商","附件列表","应用系统运维","自动创建对象","资产分类中文名","应用软件开发负责人","中文别名","资产编号","使用部门","供应链负责人","质保到期日","登记日期","现场运维","乐观锁","技术分管","维保年限","序列号","资产物理位置"],"安全设备":["序号","资产分类","编号前缀","配置项类型","资产状态中文名","显示名称(GDH)","信息中心主管","更新时间","运维经理","备注","技术管理","系统版本","创建时间","配置项ID","制造商","附件列表","应用系统运维","自动创建对象","资产分类中文名","应用软件开发负责人","中文别名","品牌型号","网络运维","资产编号","业务部门主管","供应链负责人","现场运维","乐观锁","关联标识","技术分管","基础设施运维","业务管理","再启用时间","信息安全管理","资产名称","资产状态"],"业务应用系统":["序号","资产分类","编号前缀","配置项类型","资产状态中文名","显示名称(GDH)","信息中心主管","更新时间","运维经理","技术管理","创建时间","配置项ID","应用系统运维","附件列表","资产分类中文名","应用软件开发负责人","网络运维","资产编号","使用部门","业务部门主管","供应链负责人","现场运维","运维类别","乐观锁","关联标识","技术分管","基础设施运维","业务管理","业务系统名称","系统分类","运维负责人","信息安全管理","再启用时间","资产名称","资产状态"],"中间件":["访问状态","资产分类","序号","编号前缀","配置项类型","资产状态中文名","显示名称(GDH)","信息中心主管","更新时间","运维经理","技术管理","创建时间","配置项ID","业务IP(GDH)","服务端口(GDH)","应用系统运维","附件列表","自动创建对象","jmxPort","资产分类中文名","数据库版本","应用软件开发负责人","JVM版本","网络运维","资产编号","业务部门主管","供应链负责人","现场运维","乐观锁","关联标识","技术分管","基础设施运维","业务管理","运维负责人","中间件类型","信息安全管理","再启用时间","资产名称","资产状态"],"行为管理":["资产型号","运维负责人","更新时间","设备电源数","自定义编号","配置项ID","品牌型号","网络运维","标签","供应商","业务部门主管","关联标识","基础设施运维","业务管理","信息安全管理","再启用时间","购买日期","资产名称","所属网络区域","使用人","资产状态","序号","资产分类","采购日期","编号前缀","配置项类型","资产状态中文名","显示名称(GDH)","信息中心主管","运维经理","备注","技术管理","系统版本","创建时间","制造商","附件列表","应用系统运维","自动创建对象","资产分类中文名","应用软件开发负责人","中文别名","资产编号","使用部门","供应链负责人","质保到期日","登记日期","现场运维","乐观锁","技术分管","维保年限","序列号","资产物理位置"],"堡垒机":["序号","资产分类","编号前缀","配置项类型","资产状态中文名","资产型号","显示名称(GDH)","信息中心主管","更新时间","运维经理","设备电源数","技术管理","系统版本","创建时间","配置项ID","附件列表","应用系统运维","自动创建对象","资产分类中文名","应用软件开发负责人","中文别名","品牌型号","网络运维","资产编号","使用部门","业务部门主管","供应链负责人","质保到期日","现场运维","乐观锁","关联标识","技术分管","基础设施运维","业务管理","维保年限","再启用时间","信息安全管理","序列号","购买日期","资产名称","所属网络区域","资产状态","资产物理位置"],"存储设备":["序号","资产分类","编号前缀","配置项类型","资产状态中文名","显示名称(GDH)","信息中心主管","更新时间","运维经理","供应链维保电话","创建时间","配置项ID","制造商","网络区域(GDH)","生产日期","附件列表","自动创建对象","资产分类中文名","品牌型号","网络运维","资产编号","质保到期日","部署位置(GDH)","乐观锁","关联标识","信息安全管理","序列号","资产名称","资产状态"],"数据库":["序号","资产分类","编号前缀","配置项类型","资产状态中文名","显示名称(GDH)","信息中心主管","更新时间","运维经理","技术管理","创建时间","配置项ID","制造商","服务端口(GDH)","附件列表","应用系统运维","自动创建对象","资产分类中文名","数据库版本","应用软件开发负责人","品牌型号","网络运维","资产编号","业务部门主管","供应链负责人","现场运维","乐观锁","关联标识","技术分管","数据库类型","基础设施运维","业务管理","运维负责人","信息安全管理","资产名称","信息中心负责人","资产状态"],"数据库2":["资产分类","序号","编号前缀","数据库类型","资产状态中文名","配置项类型","显示名称(GDH)","信息中心主管","更新时间","运维经理","备注","服务端口","创建时间","数据库实例","配置项ID","制造商","数据库运维支持","应用系统运维","附件列表","数据文件大小","资产分类中文名","数据库版本","应用软件开发负责人","品牌型号","系统名称","网络运维","资产编号","运行环境","使用部门","供应链负责人","账户用途","资源类型(GDH)","乐观锁","关联标识","数据库名","基础设施运维","信息安全管理","再启用时间","信息部负责人","资产名称","IP地址","资产状态","账户名称"],"入侵检测设备":["序号","资产分类","编号前缀","配置项类型","资产状态中文名","显示名称(GDH)","信息中心主管","更新时间","运维经理","设备电源数","技术管理","系统版本","创建时间","配置项ID","附件列表","应用系统运维","自动创建对象","资产分类中文名","应用软件开发负责人","中文别名","品牌型号","网络运维","资产编号","使用部门","业务部门主管","供应链负责人","质保到期日","现场运维","乐观锁","关联标识","技术分管","基础设施运维","业务管理","维保年限","再启用时间","信息安全管理","购买日期","资产名称","所属网络区域","资产状态","资产物理位置"],"IPMI硬件":["序号","资产分类","维保电话","编号前缀","资产状态中文名","温度状态","配置项类型","运行状态","显示名称(GDH)","信息中心主管","更新时间","运维经理","安装位置","创建时间","配置项ID","制造商","网络区域(GDH)","硬盘大小","生产日期","服务器业务IP","附件列表","资产分类中文名","品牌型号","网络运维","资产编号","所在机房","电压状态","质保到期日","乐观锁","基础设施运维","业务管理","电源状态","运维负责人","维保年限","风扇状态","再启用时间","内存大小","信息安全管理","序列号","资产名称","资产状态"],"业务资产":["序号","资产分类","编号前缀","配置项类型","资产状态中文名","显示名称(GDH)","信息中心主管","更新时间","运维经理","技术管理","创建时间","配置项ID","应用系统运维","附件列表","资产分类中文名","应用软件开发负责人","网络运维","资产编号","使用部门","业务部门主管","供应链负责人","现场运维","乐观锁","关联标识","技术分管","基础设施运维","业务管理","信息安全管理","再启用时间","资产名称","资产状态"],"数据库3":["序号","资产分类","编号前缀","配置项类型","资产状态中文名","显示名称(GDH)","信息中心主管","更新时间","创建时间","配置项ID","制造商","业务IP(GDH)","数据库运维支撑","附件列表","应用系统运维","资产分类中文名","数据库版本","品牌型号","网络运维","资产编号","业务部门主管","乐观锁","基础设施运维","业务管理","信息安全管理","再启用时间","资产名称","资产状态"],"软件资产":["序号","资产分类","编号前缀","配置项类型","资产状态中文名","显示名称(GDH)","信息中心主管","更新时间","运维经理","技术管理","创建时间","配置项ID","制造商","附件列表","应用系统运维","自动创建对象","资产分类中文名","数据库版本","应用软件开发负责人","品牌型号","网络运维","资产编号","业务部门主管","供应链负责人","现场运维","乐观锁","关联标识","技术分管","基础设施运维","业务管理","信息安全管理","资产名称","资产状态"],"互联网发布信息":["序号","资产分类","目的地址","编号前缀","资产状态中文名","配置项类型","显示名称(GDH)","信息中心主管","更新时间","运维经理","技术管理","创建时间","配置项ID","域名","应用系统运维","附件列表","协议","自动创建对象","资产分类中文名","真实服务器端口","真实服务器IP","网络运维","资产编号","使用部门","NAT端口","业务部门主管","应用系统名称","乐观锁","关联标识","技术分管","基础设施运维","业务管理","NAT地址","运维负责人","目的端口","信息安全管理","再启用时间","资产状态"],"审计设备":["序号","资产分类","编号前缀","配置项类型","资产状态中文名","资产型号","显示名称(GDH)","信息中心主管","更新时间","运维经理","设备电源数","技术管理","创建时间","配置项ID","应用系统运维","附件列表","自动创建对象","资产分类中文名","应用软件开发负责人","中文别名","品牌型号","网络运维","资产编号","使用部门","业务部门主管","供应链负责人","质保到期日","现场运维","乐观锁","关联标识","技术分管","基础设施运维","业务管理","维保年限","信息安全管理","再启用时间","序列号","购买日期","所属网络区域","资产名称","资产状态","资产物理位置"],"交换机路由器":["序号","资产分类","编号前缀","配置项类型","资产状态中文名","显示名称(GDH)","信息中心主管","更新时间","运维经理","技术管理","设备名称","系统版本","所属网络区域","创建时间","配置项ID","附件列表","应用系统运维","自动创建对象","资产分类中文名","应用软件开发负责人","中文别名","品牌型号","网络运维","资产编号","使用部门","业务部门主管","供应链负责人","现场运维","乐观锁","关联标识","技术分管","基础设施运维","业务管理","设备电源数","运维负责人","再启用时间","信息安全管理","序列号","资产名称","资产状态","资产物理位置"],"IPv4资源":["网段","序号","资产分类","编号前缀","配置项类型","资产状态中文名","显示名称(GDH)","乐观锁","用途","更新时间","备注","创建时间","配置项ID","运维负责人","资源类型","再启用时间","附件列表","资产分类中文名","资产编号","使用部门","资产状态"],"服务器硬件":["序号","资产分类","编号前缀","配置项类型","资产状态中文名","显示名称(GDH)","信息中心主管","更新时间","运维经理","创建时间","配置项ID","制造商","网络区域(GDH)","硬盘大小","生产日期","附件列表","资产分类中文名","品牌型号","网络运维","资产编号","质保到期日","乐观锁","基础设施运维","业务管理","再启用时间","内存大小","信息安全管理","序列号","资产名称","资产状态"],"二级域名":["序号","资产分类","编号前缀","配置项类型","资产状态中文名","显示名称(GDH)","乐观锁","更新时间","备注","创建时间","配置项ID","再启用时间","附件列表","自动创建对象","资产分类中文名","资产名称","资产编号","资产状态"],"Linux":["序号","资产分类","内存总容量(G)","所属资源池","编号前缀","资产状态中文名","配置项类型","显示名称(GDH)","信息中心主管","更新时间","运维经理","创建时间","配置项ID","系统SN/授权类型","网络区域(GDH)","附件列表","资产分类中文名","运维人员联系方式","访问状态","虚拟机ID/机架位置","网络运维","资产编号","操作系统版本","部署位置(GDH)","资源类型","CPU核数","乐观锁","硬盘总容量(G)","基础设施运维","业务管理","环境","运维负责人","IP地址","再启用时间","信息安全管理","资产名称","信息中心负责人","资产状态"],"防火墙设备":["序号","资产分类","编号前缀","配置项类型","资产状态中文名","显示名称(GDH)","信息中心主管","更新时间","运维经理","备注","技术管理","系统版本","创建时间","配置项ID","制造商","附件列表","应用系统运维","自动创建对象","资产分类中文名","应用软件开发负责人","中文别名","品牌型号","网络运维","资产编号","业务部门主管","供应链负责人","现场运维","乐观锁","关联标识","技术分管","基础设施运维","业务管理","运维负责人","再启用时间","信息安全管理","资产名称","资产状态"],"操作系统":["序号","资产分类","内存总容量(G)","所属资源池","编号前缀","资产状态中文名","配置项类型","显示名称(GDH)","信息中心主管","更新时间","运维经理","创建时间","配置项ID","系统SN/授权类型","网络区域(GDH)","附件列表","资产分类中文名","运维人员联系方式","虚拟机ID/机架位置","网络运维","访问状态","资产编号","操作系统版本","部署位置(GDH)","资源类型","CPU核数","乐观锁","硬盘总容量(G)","基础设施运维","业务管理","环境","再启用时间","信息安全管理","资产名称","信息中心负责人","资产状态"],"网络硬件":["序号","资产分类","编号前缀","配置项类型","资产状态中文名","显示名称(GDH)","信息中心主管","更新时间","运维经理","技术管理","设备名称","系统版本","所属网络区域","创建时间","配置项ID","附件列表","应用系统运维","自动创建对象","资产分类中文名","应用软件开发负责人","中文别名","品牌型号","网络运维","资产编号","使用部门","业务部门主管","供应链负责人","现场运维","乐观锁","关联标识","技术分管","基础设施运维","业务管理","设备电源数","再启用时间","信息安全管理","序列号","资产名称","资产状态"]}';

    // // 1. 将 JSON 字符串解析为 JavaScript 对象
    // const qianduanmap = JSON.parse(jsonStr);
    // // 方法3: 使用 Object.keys()
    // Object.keys(qianduanmap).forEach(key => {
    //   if(key==customerTypeName.value){
    //     console.log("Key:", key);
    //     const values = qianduanmap[key];
    //     console.log("Values:", values);

    //     values.forEach((value, index) => {
    //         resAllDataCustomerFormCreateRules.value.forEach(tmp => {
    //                   let newTmp = JSON.parse(JSON.stringify(tmp));
    //                   if (value == newTmp.title) {
    //                     if(value == "资产名称" || value == "资产状态" ||value == "资产状态中文名" ||value == "资产分类中文名" ||value == "资产分类" ||value == "采购日期"  ){

    //                     }else{
    //                         defaultFormCreateRules.value.push(tmp)
    //                     }

    //                   }
    //                 });

    //         console.log(`  Value ${index + 1}:`, value);
    //     });
    //   }

    // });
  });
  //位置
  getCategoryTreeAllData("Location").then(res => {
    // 使用traverseTree遍历树
    traverseTree(res as any, node => {
      node["lable"] = node.attr.cname;
      node["value"] = node.attr.cname;
    });
    LocationSelectList.value = [res as any];
    //LocationCustomerSelectList.value = [res as any];
  });

  getUserDepartment().then(res => {
    let newres = JSON.parse(JSON.stringify(res));
    traverseTree(newres[0], node => {
      node.lable = node.attr.orgNo;
      node.value = node.attr.orgName;
    });
    departmentSelectList.value = newres;
  });
  console.log(LocationSelectList.value);

  let similarForm = {
    eavNo: newParams.eav,
    type: "request"
  };
  findSimilarFormCustom(similarForm, "formCustomQueryDTO").then(res => {
    console.log(res);
    similarFormCustomOptions.value = res as any;
  });
  console.log(newParams);
  // let newParams = JSON.parse(JSON.stringify(params));
  if (newParams.id != undefined && newParams.id != null) {
    formCustomData.formCustomId = newParams.id;
    findFormCustomById(newParams.id).then(res => {
      //let tmpDefaultFormCreateRules=[];
      console.log("已存在：过滤");
      //console.log(item)
      defaultFormCreateRules.value = [];
      let newRes2 = JSON.parse(JSON.stringify(res));
      let yyde = Base64.decode(newRes2.formCustomContents); //解密
      let a = JSON.parse(yyde);
      // let a=b._value
      console.log(a);
      for (let i = 0; i < a.length; i++) {
        if (a[i].label != undefined && a[i].label != "") {
          defaultFormCreateRules.value = defaultBaseFormCreateRules.value;
          break;
        }
        if (a[i].col != null && a[i].col != undefined) {
          hearderData.value.layoutType = "twoRow";
        } else {
          hearderData.value.layoutType = "oneRow";
        }
        console.log(a[i].col != null && a[i].col != undefined);
        console.log(hearderData.value.layoutType);
        if (a[i].title == "所属客户") {
          a[i]["on"] = {
            focus(inject) {
              dialogCompanyNoTableVisible.value = true;
            }
          };
        }
        if (a[i].title == "请求分类") {
          a[i]["on"] = {
            focus(inject) {
              dialogRequestCategoryTableVisible.value = true;
            }
          };
        }
        if (a[i].title == "请求用户") {
          a[i]["on"] = {
            focus(inject) {
              dialogCreatedByTableVisible.value = true;
            }
          };
        }
        if (a[i].title == "位置") {
          a[i]["on"] = {
            focus(inject) {
              dialogLocationTableVisible.value = true;
            }
          };
        }
        if (a[i].attrdataDictionary != null && a[i].attrdataDictionary != undefined) {
          let optionList = [];
          //优先级priority
          // dataDictionaryItemsfindByCode(a[i].attrdataDictionary).then(res => {
          //   (res as any).forEach(function (element) {
          //     // element["label"] = element["dname"];
          //     // element["value"] = element["dname"];
          // 	//optionList.push({label:element["dname"],value:element["dcode"]})
          // 	a[i].options.push({label:element["dname"],value:element["dcode"]})
          //   });
          // });
        }
        //tmpDefaultFormCreateRules.push(a[i])
        defaultFormCreateRules.value.push(a[i]);
      }
      customerFormCreateRules.value = [];
      baseFormCreateRules.value = [];
      defaultBaseFormCreateRules.value.forEach(item => {
        let newItem = JSON.parse(JSON.stringify(item));
        let isAddBase = true;
        defaultFormCreateRules.value.forEach(tmp => {
          let newTmp = JSON.parse(JSON.stringify(tmp));
          if (newItem.field == newTmp.field) {
            isAddBase = false;
          }
        });
        if (isAddBase == true) {
          baseFormCreateRules.value.push(item);
        }
      });

      findAttributesByEavNo(newParams.eav).then(res => {
        (res as any).forEach(function (element) {
          if (element.attrType == "String") {
            customerFormCreateRules.value.push({
              attrNo: element.attrNo,
              type: "input",
              field: element.attrName,
              title: element.attrAsName,
              value: "",
              customerType: "customer",
              col: {
                span: 10
              }
            });
          }
          if (element.attrType == "Radio") {
            customerFormCreateRules.value.push({
              attrNo: element.attrNo,
              type: "radio",
              field: element.attrName,
              title: element.attrAsName,
              value: "",
              customerType: "customer",
              col: {
                span: 10
              },
              options: [{ value: true, label: element.attrAsName, disabled: false }]
            });
          }
          if (element.attrType == "checkbox") {
            customerFormCreateRules.value.push({
              attrNo: element.attrNo,
              type: "checkbox",
              field: element.attrName,
              title: element.attrAsName,
              value: "",
              customerType: "customer",
              col: {
                span: 10
              },
              options: [{ value: true, label: element.attrAsName, disabled: false }]
            });
          }
          if (element.attrType == "Double") {
            customerFormCreateRules.value.push({
              attrNo: element.attrNo,
              type: "InputNumber",
              field: element.attrName,
              title: element.attrAsName,
              value: "",
              customerType: "customer",
              col: {
                span: 10
              },
              props: {
                precision: 3
              }
            });
          }
          if (element.attrType == "Integer") {
            customerFormCreateRules.value.push({
              attrNo: element.attrNo,
              type: "InputNumber",
              field: element.attrName,
              title: element.attrAsName,
              value: "",
              customerType: "customer",
              col: {
                span: 10
              },
              props: {
                precision: 0
              }
            });
          }
          if (element.attrType == "Date") {
            customerFormCreateRules.value.push({
              attrNo: element.attrNo,
              type: "DatePicker",
              field: element.attrName,
              title: element.attrAsName,
              value: "",
              customerType: "customer",
              col: {
                span: 10
              },
              props: {
                type: "datetime",
                format: "YYYY-MM-dd HH:mm:ss",
                placeholder: "请选择日期"
              }
            });
          }
          if (element.attrType == "Lob") {
            customerFormCreateRules.value.push({
              attrNo: element.attrNo,
              type: "input",
              field: element.attrName,
              title: element.attrAsName,
              value: "",
              customerType: "customer",
              col: {
                span: 10
              },
              props: {
                type: "textarea "
              }
            });
          }
          if (element.attrType == "DataDictionaray") {
            let optionList = [];
            //优先级priority
            dataDictionaryItemsfindByCode(element.attrdataDictionary).then(res => {
              (res as any).forEach(function (element) {
                element["lable"] = element["dname"];
                element["value"] = element["dname"];
              });
              optionList = res as any;
            });
            customerFormCreateRules.value.push({
              attrNo: element.attrNo,
              type: "select",
              field: element.attrName,
              title: element.attrAsName,
              value: "",
              options: optionList,
              attrdataDictionary: element.attrdataDictionary,
              customerType: "customer"
            });
          }
        });
        resAllDataCustomerFormCreateRules.value = customerFormCreateRules.value;
        customerFormCreateRules.value = [];
        resAllDataCustomerFormCreateRules.value.forEach(item => {
          let newItem = JSON.parse(JSON.stringify(item));
          let isAddCustomer = true;
          defaultFormCreateRules.value.forEach(tmp => {
            let newTmp = JSON.parse(JSON.stringify(tmp));
            console.log("newItem.field==newTmp.field");
            console.log(newItem.field == newTmp.field);
            console.log(resAllDataCustomerFormCreateRules.value);
            console.log(defaultFormCreateRules.value);

            if (newItem.field == newTmp.field) {
              isAddCustomer = false;
            }
          });
          if (isAddCustomer == true) {
            customerFormCreateRules.value.push(item);
          }
        });

        (newRes2.formCustomTabsDtos as any).forEach(item => {
          tabList.value.push(item);
          let newItem = JSON.parse(JSON.stringify(item));
          let yyde = Base64.decode(newItem.tabAttrsConent); //解密
          let a = JSON.parse(yyde);
          (a as any).forEach(itemA => {
            let newitemA = JSON.parse(JSON.stringify(itemA));
            customerFormCreateRules.value.forEach(itemcustomerFormCreateRules => {
              let newitemcustomerFormCreateRules = JSON.parse(JSON.stringify(itemcustomerFormCreateRules));
              if (newitemA.field == newitemcustomerFormCreateRules.field) {
                deletetcustomerFormCreateRulesObj(newitemA.field);
              }
            });
          });
        });
      });
    });
  }
});
const activeNames = ref("");
const dialogCompanyNoTableVisible = ref(false);
const dialogCreatedByTableVisible = ref(false); //创建人
const dialogOwnerVisible = ref(false);
const dialogUserNameVisible = ref(false);

const dialogLocationTableVisible = ref(false);
const dialogDepartmentVisible = ref(false);

const dialogRequestCategoryTableVisible = ref(false);
const previewCustomerTableVisible = ref(false);
const tabSettingsDialogVisible = ref(false);
const tabFieldsSelectDialogVisible = ref(false);

const isShowBorder = ref(false);
const isDefault = ref(false);
const customerTypeName = ref("");

const similarFormCustomOptions = ref<any>([]);
const baseFormCreateRules = ref<any>([]);
const defaultBaseFormCreateRules = ref<any>([
  {
    type: "input",
    field: "companyName",
    title: "所属客户",
    value: "",
    col: {
      span: 10
    },
    on: {
      focus(inject) {
        dialogCompanyNoTableVisible.value = true;
      }
    },
    validate: [{ required: true, message: "请选择客户", trigger: "change" }]
  },
  {
    type: "input",
    field: "cino",
    title: "固定资产编号",
    value: "",
    name: "cino",
    col: {
      span: 10
    },
    validate: [{ required: true, message: "请填写编号", trigger: "change" }]
  },
  {
    type: "input",
    field: "ciname",
    title: "固定资产名称",
    value: "",
    name: "ciname",
    col: {
      span: 10
    },
    validate: [{ required: true, message: "请填写名称", trigger: "change" }]
  },
  {
    type: "select",
    field: "statusId",
    title: "状态",
    value: "",
    attrdataDictionary: "useStatus",
    col: {
      span: 10
    },
    options: []
  },
  {
    type: "input",
    field: "loc",
    title: "位置",
    value: "",
    col: {
      span: 10
    },
    on: {
      focus(inject) {
        dialogLocationTableVisible.value = true;
      }
    }
  },
  {
    type: "DatePicker",
    field: "buyDate",
    title: "采购日期",
    value: "",
    col: {
      span: 10
    },
    props: {
      type: "datetime",
      // format: "yyyy-MM-dd HH:mm:ss",
      placeholder: "请选择采购日期"
      //valueFormat:"YYYY-MM-dd HH:mm:ss",
    }
  },
  {
    type: "DatePicker",
    field: "arrivalDate",
    title: "到货日期",
    value: "",
    col: {
      span: 10
    },
    props: {
      type: "datetime",
      // format: "yyyy-MM-dd HH:mm:ss",
      placeholder: "请选择到货日期"
      //valueFormat:"YYYY-MM-dd HH:mm:ss",
    }
  },
  {
    type: "DatePicker",
    field: "warningDate",
    title: "预警日期",

    col: {
      span: 10
    },
    props: {
      type: "datetime",
      // format: "yyyy-MM-dd HH:mm:ss",
      placeholder: "请选择预警日期"
    }
  },
  {
    type: "InputNumber",
    field: "lifeCycle",
    title: "生命周期（月）",
    value: "",
    col: {
      span: 10
    },
    props: {
      precision: 0
    }
  },
  {
    type: "InputNumber",
    field: "warranty",
    title: "保修期（月）",
    value: "",
    col: {
      span: 10
    },
    props: {
      precision: 0
    }
  },
  {
    type: "InputNumber",
    field: "assetsOriginalValue",
    title: "资产原值",
    value: "",
    col: {
      span: 10
    },
    props: {
      precision: 0
    }
  },
  {
    type: "input",
    field: "departmentName",
    title: "部门",
    value: "",
    col: {
      span: 10
    },
    on: {
      focus(inject) {
        dialogDepartmentVisible.value = true;
      }
    }
  },
  {
    type: "input",
    field: "owner",
    title: "负责人",
    value: "",
    col: {
      span: 10
    },
    on: {
      focus(inject) {
        dialogOwnerVisible.value = true;
      }
    }
  },
  {
    type: "input",
    field: "userName",
    title: "使用人",
    value: "",
    col: {
      span: 10
    },
    on: {
      focus(inject) {
        dialogUserNameVisible.value = true;
      }
    }
  },
  {
    type: "InputNumber",
    field: "depreciationIsZeroYears",
    title: "折旧年限",
    value: "",
    col: {
      span: 10
    },
    props: {
      precision: 0
    }
  }
]);
const customerFormCreateRules = ref<any>([]);
const resAllDataCustomerFormCreateRules = ref<any>([]);
const defaultFormCreateRules = ref<any>([
  {
    type: "input",
    field: "companyName",
    title: "所属客户",
    value: "",
    col: {
      span: 10
    },
    on: {
      focus(inject) {
        dialogCompanyNoTableVisible.value = true;
      }
    },
    validate: [{ required: true, message: "请选择客户", trigger: "change" }]
  },
  {
    type: "input",
    field: "cino",
    title: "固定资产编号",
    value: "",
    name: "cino",
    col: {
      span: 10
    },
    validate: [{ required: true, message: "请填写编号", trigger: "change" }]
  },
  {
    type: "input",
    field: "ciname",
    title: "固定资产名称",
    value: "",
    name: "ciname",
    col: {
      span: 10
    },
    validate: [{ required: true, message: "请填写名称", trigger: "change" }]
  },
  {
    type: "select",
    field: "statusId",
    title: "状态",
    value: "",
    attrdataDictionary: "useStatus",
    col: {
      span: 10
    },
    options: []
  },
  {
    type: "input",
    field: "loc",
    title: "位置",
    value: "",
    col: {
      span: 10
    },
    on: {
      focus(inject) {
        dialogLocationTableVisible.value = true;
      }
    }
  },
  {
    type: "DatePicker",
    field: "buyDate",
    title: "采购日期",
    value: "",
    col: {
      span: 10
    },
    props: {
      type: "datetime",
      // format: "yyyy-MM-dd HH:mm:ss",
      placeholder: "请选择采购日期"
      //valueFormat:"YYYY-MM-dd HH:mm:ss",
    }
  },
  {
    type: "DatePicker",
    field: "arrivalDate",
    title: "到货日期",
    value: "",
    col: {
      span: 10
    },
    props: {
      type: "datetime",
      // format: "yyyy-MM-dd HH:mm:ss",
      placeholder: "请选择到货日期"
      //valueFormat:"YYYY-MM-dd HH:mm:ss",
    }
  },
  {
    type: "DatePicker",
    field: "warningDate",
    title: "预警日期",

    col: {
      span: 10
    },
    props: {
      type: "datetime",
      // format: "yyyy-MM-dd HH:mm:ss",
      placeholder: "请选择预警日期"
      //valueFormat:"YYYY-MM-dd HH:mm:ss",
    }
  },
  {
    type: "InputNumber",
    field: "lifeCycle",
    title: "生命周期（月）",
    value: "",
    col: {
      span: 10
    },
    props: {
      precision: 0
    }
  },
  {
    type: "InputNumber",
    field: "warranty",
    title: "保修期（月）",
    value: "",
    col: {
      span: 10
    },
    props: {
      precision: 0
    }
  },
  {
    type: "InputNumber",
    field: "assetsOriginalValue",
    title: "资产原值",
    value: "",
    col: {
      span: 10
    },
    props: {
      precision: 0
    }
  },
  {
    type: "input",
    field: "departmentName",
    title: "部门",
    value: "",
    col: {
      span: 10
    },
    on: {
      focus(inject) {
        dialogDepartmentVisible.value = true;
      }
    }
  },
  {
    type: "input",
    field: "owner",
    title: "负责人",
    value: "",
    col: {
      span: 10
    },
    on: {
      focus(inject) {
        dialogOwnerVisible.value = true;
      }
    }
  },
  {
    type: "input",
    field: "userName",
    title: "使用人",
    value: "",
    col: {
      span: 10
    },
    on: {
      focus(inject) {
        dialogUserNameVisible.value = true;
      }
    }
  },
  {
    type: "InputNumber",
    field: "depreciationIsZeroYears",
    title: "折旧年限",
    value: "",
    col: {
      span: 10
    },
    props: {
      precision: 0
    }
  }
]);

// 关闭
const confirm = () => {
  //emit("update:dragDialog", false);
};
// 提交
const submitDrag = () => {
  // let encodePwd=Base64.encode("张三吗");//加密
  // console.log(encodePwd)
  // let decodePwd=Base64.decode(encodePwd);//解密
  // console.log(decodePwd)
  //emit("submitDrag");
};
// 复选框勾选
const checkoutChange = (element, index) => {
  //emit("checkoutChange", element, index);
};
// 拖动前
const onDragStart = () => {
  // emit("onDragStart");
};
// 拖动后
const onDragEnd = () => {
  //emit("onDragEnd");
};
const formCustomData = reactive({
  formCustomId: "",
  formCustomName: "",
  eavNo: "",
  ciCategoryNo: "",
  formCustomContents: "",
  isShowBorder: 0,
  type: "ci",
  isDefault: "false"
});

const tabDataForm = reactive({
  tabName: "",
  tabId: "",
  tabAttrsConent: "",
  tabAttrsDecode: "",
  tabAttrsConentDecode: ""
});

const saveTest = () => {
  console.log(formData);
};
const saveCustomer = () => {
  if (hearderData.value.layoutType == "oneRow") {
    defaultFormCreateRules.value.forEach(element => {
      console.log(element);
      delete element.col;
      delete element.yy;
    });
  } else {
    defaultFormCreateRules.value.forEach(element => {
      element["col"] = {
        span: 10
      };
      console.log(element);
    });
  }
  formCustomData.isShowBorder = isShowBorder.value == true ? 1 : 0;
  formCustomData.isDefault = isDefault.value == true ? "true" : "false";
  console.log(defaultFormCreateRules.value);
  formCustomData.formCustomContents = Base64.encode(JSON.stringify(defaultFormCreateRules.value)); //加密
  console.log(formCustomData);
  let tabsIdsstr = "";
  tabList.value.forEach(Element => {
    if (tabsIdsstr == "") {
      tabsIdsstr = "?formCustomDTO.tabsIds=" + Element["tabId"];
    } else {
      tabsIdsstr = tabsIdsstr + "&formCustomDTO.tabsIds=" + Element["tabId"];
    }
  });
  saveFormCustom(formCustomData, "formCustomDTO", tabsIdsstr).then(res => {
    ElMessage.success("新增成功");
    tabStore.removeTabs(route.fullPath);
    router.push(`/system/tools/customerForm?pageNo=${Math.random().toFixed(3)}`);
  });
};
const edescFlag = ref(false);
const formCreateRules = ref<any>([]);
const formCreateRules2 = ref<any>([]);
const option = ref({
  submitBtn: false
});
const option2 = ref({
  submitBtn: false
});
interface TreeNode {
  value: any;
  lable: any;
  children?: TreeNode[];
  id: string;
  name: string;
  attr: any;
  data: any;
}

function traverseTree(node: TreeNode, callback: (node: TreeNode) => void) {
  callback(node);
  if (node.children) {
    node.children.forEach(child => traverseTree(child, callback));
  }
}
const previewCustomer = () => {
  edescFlag.value = false;
  previewCustomerTableVisible.value = true;
  let a = defaultFormCreateRules.value;
  let formCreateRulesArray: any[] = [];
  let formCreateRules2Array: any[] = [];

  for (let i = 0; i < a.length; i++) {
    if (a[i].title == "所属客户") {
      a[i]["on"] = {
        focus(inject) {
          dialogCompanyNoTableVisible.value = true;
        }
      };
    }
    if (a[i].title == "请求分类") {
      a[i]["on"] = {
        focus(inject) {
          dialogRequestCategoryTableVisible.value = true;
        }
      };
    }
    if (a[i].title == "请求用户") {
      a[i]["on"] = {
        focus(inject) {
          dialogCreatedByTableVisible.value = true;
        }
      };
    }
    if (a[i].title == "负责人") {
      a[i]["on"] = {
        focus(inject) {
          dialogOwnerVisible.value = true;
        }
      };
    }
    if (a[i].title == "位置") {
      a[i]["on"] = {
        focus(inject) {
          dialogLocationTableVisible.value = true;
        }
      };
    }
    if (a[i].attrdataDictionary != null && a[i].attrdataDictionary != undefined) {
      let optionList = [];
      //优先级priority
      dataDictionaryItemsfindByCode(a[i].attrdataDictionary).then(res => {
        (res as any).forEach(function (element) {
          // element["label"] = element["dname"];
          // element["value"] = element["dname"];
          //optionList.push({label:element["dname"],value:element["dcode"]})
          (a[i].col = {
            span: 10
          }),
            a[i].options.push({ label: element["dname"], value: element["dcode"] });
        });
      });
    }

    if (a[i].title == "描述") {
      edescFlag.value = true;
      continue;
    }
    if (edescFlag.value == false) {
      formCreateRulesArray.push(a[i] as any);
    } else {
      formCreateRules2Array.push(a[i] as any);
    }
  }
  formCreateRules.value = formCreateRulesArray;
  formCreateRules2.value = formCreateRules2Array;

  console.log(formData.value);
  console.log("xxxxxxx");
};
const rules = reactive<FormRules>({
  companyName: [{ required: true, message: "请选择公司", trigger: "blur" }],
  createdByName: [{ required: true, message: "请选择请求用户", trigger: "blur" }],
  requestCategoryName: [{ required: true, message: "请选择请求分类", trigger: "blur" }],
  etitle: [{ required: true, message: "请输入标题", trigger: "blur" }],
  edesc: [{ required: true, message: "请输入描述", trigger: "blur" }]
});
const loadData = () => {
  state.modules.group1 = [];
  state.modules.group2 = [];
  state.modules.group3 = [];
  state.modules.group4 = [];
  state.modules.public = [];
  state.modules.public2 = [];
  hearderData.value.selId = "static_all";
  getCurrentLoginUser().then(res => {
    let newParams = JSON.parse(JSON.stringify(res));
    hearderData.value.loginName = newParams.loginName;
    findallViewAndUserViewTwo(newParams.loginName).then(viewRes => {
      let newViewRes = JSON.parse(JSON.stringify(viewRes));
      let chars = newViewRes.viewRowsStr.split(":");
      for (let i = 0; i < newViewRes.viewdtos.length; i++) {
        if (chars[i] == "1") {
          state.modules.group1.push(newViewRes.viewdtos[i]);
        } else if (chars[i] == "2") {
          state.modules.group2.push(newViewRes.viewdtos[i]);
        } else if (chars[i] == "3") {
          state.modules.group3.push(newViewRes.viewdtos[i]);
        } else if (chars[i] == "4") {
          state.modules.group4.push(newViewRes.viewdtos[i]);
        } else {
        }
      }
      hearderData.value.layoutType = newViewRes.layoutType;
      hearderData.value.oneRows = newViewRes.rowsWidth.oneRows;
      hearderData.value.twoRows = newViewRes.rowsWidth.twoRows;
      hearderData.value.threeRows = newViewRes.rowsWidth.threeRows;
      hearderData.value.fourRows = newViewRes.rowsWidth.fourRows;
      hearderData.value.customType = newViewRes.customType;

      findAllSystemView().then(allRes => {
        let newallRes = JSON.parse(JSON.stringify(allRes));
        for (let i = 0; i < newallRes.length; i++) {
          let add = true;
          state.modules.group1.forEach(item => {
            if (item.viewId == newallRes[i].viewId) {
              console.log("已存在：过滤");
              console.log(item.viewName);
              add = false;
            }
          });
          state.modules.group2.forEach(item => {
            if (item.viewId == newallRes[i].viewId) {
              add = false;
            }
          });
          state.modules.group3.forEach(item => {
            if (item.viewId == newallRes[i].viewId) {
              add = false;
            }
          });
          state.modules.group4.forEach(item => {
            if (item.viewId == newallRes[i].viewId) {
              add = false;
            }
          });
          if (add == true) {
            if (state.modules.public.length > state.modules.public2.length) {
              state.modules.public2.push(newallRes[i]);
            } else {
              state.modules.public.push(newallRes[i]);
            }
          }
        }
      });
    });
  });
};

const similarFormCustomChange = (data: any) => {
  let tmpDefaultFormCreateRules = [];
  similarFormCustomOptions.value.forEach(item => {
    if (item.formCustomId == data) {
      console.log("已存在：过滤");
      console.log(item);
      defaultFormCreateRules.value = [];
      let yyde = Base64.decode(item.formCustomContents); //解密
      let a = JSON.parse(yyde);
      // let a=b._value
      console.log(a);
      for (let i = 0; i < a.length; i++) {
        if (a[i].title == "所属客户") {
          a[i]["on"] = {
            focus(inject) {
              dialogCompanyNoTableVisible.value = true;
            }
          };
        }
        if (a[i].title == "请求分类") {
          a[i]["on"] = {
            focus(inject) {
              dialogRequestCategoryTableVisible.value = true;
            }
          };
        }
        if (a[i].title == "请求用户") {
          a[i]["on"] = {
            focus(inject) {
              dialogCreatedByTableVisible.value = true;
            }
          };
        }
        if (a[i].title == "位置") {
          a[i]["on"] = {
            focus(inject) {
              dialogLocationTableVisible.value = true;
            }
          };
        }
        if (a[i].attrdataDictionary != null && a[i].attrdataDictionary != undefined) {
          let optionList = [];
          //优先级priority
          // dataDictionaryItemsfindByCode(a[i].attrdataDictionary).then(res => {
          //   (res as any).forEach(function (element) {
          //     // element["label"] = element["dname"];
          //     // element["value"] = element["dname"];
          // 	//optionList.push({label:element["dname"],value:element["dcode"]})
          // 	a[i].options.push({label:element["dname"],value:element["dcode"]})
          //   });
          // });
        }
        //tmpDefaultFormCreateRules.push(a[i])
        defaultFormCreateRules.value.push(a[i]);
      }
    }
  });
  //defaultFormCreateRules.value=tmpDefaultFormCreateRules
  customerFormCreateRules.value = [];
  baseFormCreateRules.value = [];
  defaultBaseFormCreateRules.value.forEach(item => {
    let newItem = JSON.parse(JSON.stringify(item));
    let isAddBase = true;
    defaultFormCreateRules.value.forEach(tmp => {
      let newTmp = JSON.parse(JSON.stringify(tmp));
      if (newItem.field == newTmp.field) {
        isAddBase = false;
      }
    });
    if (isAddBase == true) {
      baseFormCreateRules.value.push(item);
    }
  });
  resAllDataCustomerFormCreateRules.value.forEach(item => {
    let newItem = JSON.parse(JSON.stringify(item));
    let isAddCustomer = true;
    defaultFormCreateRules.value.forEach(tmp => {
      let newTmp = JSON.parse(JSON.stringify(tmp));
      if (newItem.field == newTmp.field) {
        isAddCustomer = false;
      }
    });
    if (isAddCustomer == true) {
      customerFormCreateRules.value.push(item);
    }
  });

  // console.log(tmpDefaultFormCreateRules)
  // //过滤赋值
  // tmpDefaultFormCreateRules.forEach(tmp=>{
  // 	console.log(tmp)
  // 	let isAddBase=true
  // 	defaultBaseFormCreateRules.value.forEach(item=>{
  // 		console.log(item)
  // 		if(item.field==tmp.field){
  // 			isAddBase=false
  // 		}
  // 	})
  // 	let isAddCustomer=true
  // 	resAllDataCustomerFormCreateRules.value.forEach(customer=>{
  // 		console.log(customer)
  // 		if(customer.field==tmp.field){
  // 			isAddCustomer=false
  // 		}

  // 	})
  // 	if(isAddBase==true){
  // 		defaultFormCreateRules.value.push(tmp)
  // 	}

  // })

  // baseFormCreateRules.value.forEach(item=>{
  // 	let add=true
  // 	tmpDefaultFormCreateRules.value.forEach(tmp=>{
  // 		if(item.field==tmp.field){
  // 			add=false
  // 		}
  // 	})
  // 	if(add==true){
  // 		defaultFormCreateRules.value.push(item)
  // 	}
  // })
};
const hearderData = ref({
  customType: "",
  loginName: "",
  layoutType: "twoRow",
  oneRows: 0,
  twoRows: 0,
  threeRows: 0,
  fourRows: 0,
  selId: "static_all"
});
const content = ref("");
const similarFormCustom = ref();
const data = ref({});
const state = reactive({
  /*工作台的数据结构
    disabledMove:禁止移动
    disabledPark:禁止停靠
  */
  modules: {
    group1: [
      // { name: "消息", id: 1, disabledMove: false, disabledPark: false },
      // { name: "库存", id: 2, disabledMove: false, disabledPark: false },
      // { name: "销量", id: 3, disabledMove: false, disabledPark: false },
      // { name: "日志", id: 4, disabledMove: false, disabledPark: false },
    ] as any[],
    group2: [
      // { name: "订单", id: 5, disabledMove: false, disabledPark: false },
      // { name: "员工", id: 6, disabledMove: false, disabledPark: false },
      // { name: "报表", id: 7, disabledMove: false, disabledPark: false },
    ] as any[],
    group3: [
      // { name: "系统", id: 8, disabledMove: false, disabledPark: false },
      // { name: "审核", id: 9, disabledMove: false, disabledPark: false },
    ] as any[],
    group4: [
      // { name: "系统", id: 8, disabledMove: false, disabledPark: false },
      // { name: "审核", id: 9, disabledMove: false, disabledPark: false },
    ] as any[],
    public: [
      // { name: "系统", id: 8, disabledMove: false, disabledPark: false },
      // { name: "审核", id: 9, disabledMove: false, disabledPark: false },
    ] as any[],
    public2: [
      // { name: "系统", id: 8, disabledMove: false, disabledPark: false },
      // { name: "审核", id: 9, disabledMove: false, disabledPark: false },
    ] as any[]
  }
});

const addtabFiletab = () => {
  console.log("新增");
  deleteFieldsList.value = [];
  tabOpt.value = "add";
  tabDataForm.tabName = "";
  tabDataForm.tabId = "";
  tabDataForm.tabAttrsConent = "";
  tabDataForm.tabAttrsDecode = "";
  tabDataForm.tabAttrsConentDecode = "";
  tabFieldsSelectList.value = [];
  tabSettingsDialogVisible.value = true;
};
const tabFieldsSelectbtn = () => {
  tabFieldsSelectDialogVisible.value = true;
  selectQuery.value = "";
  customerFormCreateRules.value.forEach(tmp => {
    let newTmp = JSON.parse(JSON.stringify(tmp));
    if (selectQuery.value == "") {
      selectQuery.value = "?attrsQueryDTO.attrNos=" + newTmp.attrNo;
    } else {
      selectQuery.value = selectQuery.value + "," + newTmp.attrNo;
    }
  });
  setTimeout(() => {
    proTable.value?.clearSelection();
    proTable.value?.getTableList();
  }, 800);
};
const saveTabSettingsBtn = () => {
  if (tabDataForm.tabName == "") {
    ElMessage({
      type: "error",
      message: "请输入名字"
    });
    return;
  }
  if (tabFieldsSelectList.value.length <= 0) {
    ElMessage({
      type: "error",
      message: "请选择自定义字段"
    });
    return;
  }

  tabDataForm.tabAttrsConent = Base64.encode(JSON.stringify(tabFieldsSelectList.value)); //加密
  tabDataForm.tabAttrsDecode = Base64.encode(JSON.stringify(tabFieldsSelectList.value)); //加密
  tabDataForm.tabAttrsConentDecode = Base64.encode(JSON.stringify(tabFieldsSelectList.value)); //加密
  let tabAttrsIdstr = "";
  tabFieldsSelectList.value.forEach(tmp => {
    let newTmp = JSON.parse(JSON.stringify(tmp));
    if (tabAttrsIdstr == "") {
      tabAttrsIdstr = "?tabAttrsId=" + newTmp.attrNo;
    } else {
      tabAttrsIdstr = tabAttrsIdstr + "&tabAttrsId=" + newTmp.attrNo;
    }
  });
  tmptabFieldsSelectList.value = [];
  customerFormCreateRules.value.forEach(item => {
    tmptabFieldsSelectList.value.push(item);
  });
  tmptabFieldsSelectList.value.forEach((item, index) => {
    let newItem = JSON.parse(JSON.stringify(item));
    let isAddCustomer = true;
    tabFieldsSelectList.value.forEach(tmp => {
      let newTmp = JSON.parse(JSON.stringify(tmp));
      if (newItem.field == newTmp.field) {
        isAddCustomer = false;
      }
    });
    if (isAddCustomer == true) {
      // tabFieldsSelectList.value.push(item);
      console.log("不存在");
    } else {
      console.log("存在");
      // customerFormCreateRules.value.splice(index, 1);
      deletetcustomerFormCreateRulesObj(newItem.field);
    }
  });

  if (tabOpt.value == "add") {
    saveFormCustomTabs(tabDataForm, "formCustomTabsDTO", [], tabAttrsIdstr).then(res => {
      console.log(res);
      tabDataForm.tabId = res.toString();
      tabList.value.push(JSON.parse(JSON.stringify(tabDataForm)));
      console.log(tabDataForm);
    });
  } else {
    updateFormCustomTabs(tabDataForm, "formCustomTabsDTO", [], tabAttrsIdstr).then(res => {
      tabList.value.forEach((Element2, index) => {
        let newElement2 = JSON.parse(JSON.stringify(Element2));
        console.log("newElement2");
        console.log(newElement2);
        if (newElement2.tabId.toString() == res.toString()) {
          console.log("tabDataForm");
          console.log(tabDataForm);
          tabList.value[index] = JSON.parse(JSON.stringify(tabDataForm));
        }
      });
    });
  }
  deleteFieldsList.value.forEach(e => {
    let newe = JSON.parse(JSON.stringify(e));
    let readdflag = true;
    customerFormCreateRules.value.forEach(item => {
      let newitem = JSON.parse(JSON.stringify(item));
      if (newitem.field == newe.field) {
        readdflag = false;
      }
    });
    tabFieldsSelectList.value.forEach(tmp => {
      let newTmp = JSON.parse(JSON.stringify(tmp));
      if (newe.field == newTmp.field) {
        readdflag = false;
      }
    });
    if (readdflag == true) {
      customerFormCreateRules.value.push(e);
    }
  });
  tabSettingsDialogVisible.value = false;
};

//删除元素
const deletetcustomerFormCreateRulesObj = field => {
  // let tmpcustomerFormCreateRules=customerFormCreateRules.value
  for (let i = 0; i < customerFormCreateRules.value.length; i++) {
    let newItem = JSON.parse(JSON.stringify(customerFormCreateRules.value[i]));
    if (newItem.field == field) {
      customerFormCreateRules.value.splice(i, 1);
    }
  }
};
const tabList = ref<any>([]);
const tabFieldsSelectList = ref<any>([]);
const tmptabFieldsSelectList = ref<any>([]);

const tabFieldsSelectQueDingbtn = async (params: any[]) => {
  if (params.length <= 0) {
    ElMessage({
      type: "error",
      message: "请选择数据"
    });
    return;
  }
  // let tmptabFieldsSelectList:any[]  =[]
  tmptabFieldsSelectList.value = [];
  (params as any).forEach(function (element) {
    console.log(element["attrName"]);
    console.log("sssssssssssssssssss");
    console.log(element);
    if (element.attrType == "String") {
      tmptabFieldsSelectList.value.push({
        attrNo: element.attrNo,
        type: "input",
        field: element.attrName,
        title: element.attrAsName,
        value: "",
        customerType: "customer",
        col: {
          span: 10
        }
      });
    }
    if (element.attrType == "Radio") {
      tmptabFieldsSelectList.value.push({
        attrNo: element.attrNo,
        type: "radio",
        field: element.attrName,
        title: element.attrAsName,
        value: "",
        customerType: "customer",
        col: {
          span: 10
        },
        options: [{ value: true, label: element.attrAsName, disabled: false }]
      });
    }
    if (element.attrType == "checkbox") {
      tmptabFieldsSelectList.value.push({
        attrNo: element.attrNo,
        type: "checkbox",
        field: element.attrName,
        title: element.attrAsName,
        value: "",
        customerType: "customer",
        col: {
          span: 10
        },
        options: [{ value: true, label: element.attrAsName, disabled: false }]
      });
    }
    if (element.attrType == "Double") {
      tmptabFieldsSelectList.value.push({
        attrNo: element.attrNo,
        type: "InputNumber",
        field: element.attrName,
        title: element.attrAsName,
        value: "",
        customerType: "customer",
        col: {
          span: 10
        },
        props: {
          precision: 3
        }
      });
    }
    if (element.attrType == "Integer") {
      tmptabFieldsSelectList.value.push({
        attrNo: element.attrNo,
        type: "InputNumber",
        field: element.attrName,
        title: element.attrAsName,
        value: "",
        customerType: "customer",
        col: {
          span: 10
        },
        props: {
          precision: 0
        }
      });
    }
    if (element.attrType == "Date") {
      tmptabFieldsSelectList.value.push({
        attrNo: element.attrNo,
        type: "DatePicker",
        field: element.attrName,
        title: element.attrAsName,
        value: "",
        customerType: "customer",
        col: {
          span: 10
        },
        props: {
          type: "datetime",
          format: "YYYY-MM-dd HH:mm:ss",
          placeholder: "请选择日期"
        }
      });
    }
    if (element.attrType == "Lob") {
      tmptabFieldsSelectList.value.push({
        attrNo: element.attrNo,
        type: "input",
        field: element.attrName,
        title: element.attrAsName,
        value: "",
        customerType: "customer",
        col: {
          span: 10
        },
        props: {
          type: "textarea "
        }
      });
    }
    if (element.attrType == "DataDictionaray") {
      let optionList = [];
      //优先级priority
      dataDictionaryItemsfindByCode(element.attrdataDictionary).then(res => {
        (res as any).forEach(function (element) {
          element["lable"] = element["dname"];
          element["value"] = element["dname"];
        });
        optionList = res as any;
      });
      tmptabFieldsSelectList.value.push({
        attrNo: element.attrNo,
        type: "select",
        field: element.attrName,
        title: element.attrAsName,
        value: "",
        options: optionList,
        attrdataDictionary: element.attrdataDictionary,
        customerType: "customer"
      });
    }
  });
  if (tabFieldsSelectList.value.length <= 0) {
    tabFieldsSelectList.value = tmptabFieldsSelectList.value;
  } else {
    tmptabFieldsSelectList.value.forEach(item => {
      let newItem = JSON.parse(JSON.stringify(item));
      let isAddCustomer = true;
      tabFieldsSelectList.value.forEach(tmp => {
        let newTmp = JSON.parse(JSON.stringify(tmp));
        if (newItem.field == newTmp.field) {
          isAddCustomer = false;
        }
      });
      if (isAddCustomer == true) {
        tabFieldsSelectList.value.push(item);
      }
    });
  }
  tabFieldsSelectDialogVisible.value = false;
};
//删除元素
const deletetabFieldsSelectListObj = (element, index) => {
  tabFieldsSelectList.value.splice(index, 1);
  deleteFieldsList.value.push(element);
};

const deleteFieldsList = ref<any>([]);
const deletetabListObj = (element, index) => {
  tabList.value.splice(index, 1);
  let yyde = Base64.decode(element.tabAttrsConent); //解密
  let a = JSON.parse(yyde);
  (a as any).forEach(item => {
    customerFormCreateRules.value.push(item);
  });
};

const tabOpt = ref("");

const clickTab = (element, index) => {
  deleteFieldsList.value = [];
  tabOpt.value = "edit";
  // tabList.value.splice(index, 1);
  tabFieldsSelectList.value = [];
  tabDataForm.tabName = element.tabName;
  tabDataForm.tabId = element.tabId;
  let yyde = Base64.decode(element.tabAttrsConent); //解密
  let a = JSON.parse(yyde);
  (a as any).forEach(item => {
    tabFieldsSelectList.value.push(item);
  });
  tabSettingsDialogVisible.value = true;
};

const columns2 = reactive<ColumnProps<any>[]>([
  { type: "selection" },
  {
    prop: "attrAsName",
    label: "名称",
    sortable: true,
    search: {
      el: "input",
      tooltip: "输入自定义类型名称",
      label: "输入名称",
      key: "attrsQueryDTO.attrAsName"
    }
  },
  { prop: "attrGroupName", label: "自定义所属字段", sortable: true },
  {
    prop: "attrType",
    label: "类型",
    sortable: true,
    render(h) {
      switch (h.row.attrType) {
        case "String":
          return "文本";
        case "Double":
          return "小数";
        case "Lob":
          return "长文本";
        case "Integer":
          return "整数";
        case "Date":
          return "日期";
        case "Radio":
          return "单选";
        case "Checkbox":
          return "复选";
        case "DataDictionaray":
          return "关联数据字典";
        default:
          return "";
      }
    }
  },
  {
    prop: "attrIsNull",
    label: "必填项",
    sortable: true,
    render: (scope: any) => {
      switch (scope.row.attrIsNull) {
        case false:
          return "是";
        case true:
          return "否";
        default:
          return "";
      }
    }
  },
  { prop: "description", label: "描述" },
  { prop: "sortNo", label: "排序", sortable: true }
]);

const selectQuery = ref("");
// ProTable 实例
const proTable = ref<ProTableInstance>();
const getTabFieldsSelectList = (params: any) => {
  let newParams = JSON.parse(JSON.stringify(params));
  newParams.page = newParams.pageNum;
  newParams.rows = newParams.pageSize;
  newParams._search = false;
  newParams.sidx = "attrNo";
  newParams.sord = "desc";
  delete newParams.pageNum;
  delete newParams.pageSize;
  return findattrs(newParams, "", ["_search", "sidx", "sord", "page", "rows"], selectQuery.value);
};
const dataCallback = (data: any) => {
  console.log(data.data);
  return {
    list: data.data,
    total: data.totalSize,
    pageNum: data.page,
    pageSize: data.rows
  };
};

//删除元素
const deleteObj = (element, index) => {
  defaultFormCreateRules.value.splice(index, 1);
  if (element.customerType == "customer") {
    customerFormCreateRules.value.push(element);
  } else {
    baseFormCreateRules.value.push(element);
  }
  // console.log(state.modules.group1)
  // for(let i=0;i<state.modules[groupName].length;i++){
  // 	if(state.modules[groupName][i].viewId==element.viewId){
  // 		state.modules[groupName].splice(i, 1);
  // 		if(state.modules.public.length>state.modules.public2.length){
  // 			state.modules.public2.push(element)
  // 		}else{
  // 			state.modules.public.push(element)
  // 		}
  // 	}

  // }
};
//拖拽开始的事件
const onStart = () => {
  console.log("开始拖拽");
};

// //拖拽结束的事件
// const onEnd = () => {
// 	for(let i=0;i<state.modules[groupName].length;i++){
// 		if(state.modules[groupName][i].viewId==element.viewId){
// 			state.modules[groupName].splice(i, 1);
// 			if(state.modules.public.length>state.modules.public2.length){
// 				state.modules.public2.push(element)
// 			}else{
// 				state.modules.public.push(element)
// 			}
// 		}

// 	}

// 	state.modules.group1
//   console.log("结束拖拽");
//   console.log(state);
// };

const onMove = (e, originalEvent) => {
  console.log();
  //不允许停靠
  //if (e.relatedContext.element.disabledPark == true) return false;

  return true;
};
</script>
<style>
body {
  padding: 0;
  margin: 0;
  background-color: #f1f1f1;
}
.itxst {
  display: flex;
  place-content: space-around space-between;
  padding: 2px;
  background-color: #f1f1f1;
}
.group {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  /* align-content: center; */
  width: 20%;
}
.itemold {
  display: flex;
  flex-direction: column;
  width: 48.8%;
  min-height: 100px;
  padding: 0;
  margin-bottom: 10px;
  text-align: left;
  user-select: none;
  background-color: #ffffff;
  border: solid 1px #dddddd;
}
.itemold > label {
  padding: 6px 10px;
  color: #333333;
  border-bottom: solid 1px #dddddd;
}
.itemold > label:hover {
  cursor: move;
}
.itemold > p {
  padding: 6px 10px;
  color: #666666;
}
.ghost {
  border: solid 1px rgb(19 41 239) !important;
}
.chosenClass {
  border: solid 1px red;
  opacity: 1;
}
.fallbackClass {
  background-color: aquamarine;
}
.row-border {
  border: 1px solid #d3dce6; /* 边框颜色和宽度 */
  border-radius: 4px; /* 可选：圆角 */
}
.red-text {
  color: red;
}
.notice-dialog1 {
  padding: 0 12px;
  border-radius: 15px;
  .my-header {
    position: relative;
    h4 {
      height: 30px;
      text-align: center;
    }
    .el-icon {
      position: absolute;
      top: 2px;
      right: -10px;
      cursor: pointer;
    }
    .spanTip {
      font-size: 14px;
      color: #999999;
    }
  }
  .item {
    display: inline-flex;
    justify-content: space-between;
    width: 46%;
    padding: 6px 10px;
    margin: 0 0.5%;
    line-height: 42px;
    background-color: #f6f8fa;
    border-radius: 5px;
    i:nth-child(1) {
      width: 38%;
      height: 42px;
      line-height: 46px;
    }
    i:nth-child(2) {
      width: 52%;
      height: 16px;
      margin: auto 0;
      line-height: 16px;
      text-align: center;
      text-decoration: underline;
      border-right: 1px solid #cccccc;
      border-left: 1px solid #cccccc;
    }
    i:nth-child(3) {
      width: 8%;
      height: 42px;
      padding-left: 20px;
      line-height: 42px;
      text-decoration: underline;
      img {
        width: 15px;
        height: 20px;
        margin-top: 10px;
      }
    }
    .el-checkbox.el-checkbox--large {
      height: 7%;
    }
    .el-checkbox__input.is-checked .el-checkbox__inner {
      background-color: #114ed9;
      border-color: #114ed9;
    }
    .el-checkbox__input.is-checked + .el-checkbox__label {
      color: #114ed9;
    }
  }
  .item1 {
    width: 100%;
    line-height: 40px;
    background-color: #ffffff;
    border-left: solid 2px #ffffff;
    box-shadow: 0 0 10px #aa00001a;
  }
  .drag {
    cursor: move;
  }
  .item + .item {
    margin-top: 20px;
  }
  .ghost {
    border: solid 1px rgb(255 255 255) !important;
  }
  .chosenClass {
    background-color: #eeeeee;
    border: solid 1px red;
    opacity: 1;
  }
}
.notice-dialog1 .el-dialog__header {
  margin-right: 0;
  border-bottom: 1px solid #f6f6f6;
}
.notice-dialog1 .el-dialog__body {
  height: 300px;
  overflow: auto;
}
.notice-dialog1 .el-dialog__body::-webkit-scrollbar {
  display: none;
}
.notice-dialog1 .el-dialog__footer {
  padding-top: 20px;
  text-align: center;
  border-top: 1px solid #f6f6f6;
}
.item4 {
  width: 100%;
  line-height: 40px;
  background-color: #ffffff;
  border-left: solid 2px #114ed9;
  box-shadow: 0 0 10px #0000001a;
}
.my-header {
  position: relative;
  h4 {
    height: 30px;
    text-align: center;
  }
  .el-icon {
    position: absolute;
    top: 2px;
    right: -10px;
    cursor: pointer;
  }
  .spanTip {
    font-size: 14px;
    color: #999999;
  }
}
.item {
  display: inline-flex;
  justify-content: space-between;
  width: 46%;
  padding: 6px 10px;
  margin: 0 0.5%;
  line-height: 42px;
  background-color: #ffffff;
  border-radius: 5px;
  i:nth-child(1) {
    width: 70%;
    height: 42px;
    line-height: 46px;
  }
  i:nth-child(2) {
    width: 12%;
    height: 16px;
    margin: auto 0;
    line-height: 16px;
    text-align: center;
    text-decoration: underline;
    border-right: 1px solid #ffffff;
    border-left: 1px solid #ffffff;
  }
  i:nth-child(3) {
    width: 8%;
    height: 42px;
    padding-left: 20px;
    line-height: 42px;
    text-decoration: underline;
    img {
      width: 15px;
      height: 20px;
      margin-top: 10px;
    }
  }
  .el-checkbox.el-checkbox--large {
    height: 7%;
  }
  .el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: #114ed9;
    border-color: #114ed9;
  }
  .el-checkbox__input.is-checked + .el-checkbox__label {
    color: #114ed9;
  }
}
.item1 {
  width: 88%;
  line-height: 40px;
  background-color: #ffffff;
  border-left: solid 2px #ffffff;
  box-shadow: 0 0 10px #aa00001a;
}
.drag {
  cursor: move;
}
.item + .item {
  margin-top: 20px;
}

/* .ghost {
    border: solid 1px rgb(19, 41, 239) !important;
  } */

/* .chosenClass {
    background-color: #eee;
    opacity: 1;
    border: solid 1px red;
  } */
.custom-tree {
  height: 450px; /* 你想要的高度 */
  overflow-y: auto; /* 添加垂直滚动条 */
}
</style>
